<template>
    <div class="container">
        <div class="container-filter">
            <customFilter @onSubmit="handleInitTable" @onReset="handleResetTable" hideEnabled></customFilter>
        </div>
        <div class="container-data">
            <yl-multi-button
                class="multi-action"
                :hideAdd="true"
                :selectedRowKeys="selectedRowKeys"
                @add="handleAddArea"
            ></yl-multi-button>

            <a-row class="areaData">
                <a-col :xs="24" :sm="24" :md="7" :lg="9" :xl="9" class="dictionary-list">
                    <a-table
                        :columns="columns"
                        :data-source="dataSource"
                        :row-key="setRowKey"
                        :loading="loading"
                        :scroll="{ y: 540 }"
                        @expand="handleExpandRow"
                        :indentSize="12"
                        :pagination="false"
                        :customRow="handleCustomRow"
                    >
                        <template v-for="item in columns" :key="item.dataIndex" v-slot:[item.slotName]>
                            <span>{{ t(`yl.${item.slotName}`) }}</span>
                        </template>
                        <template #customAction="{ record }">
                            <a-button class="action-btn" @click.stop="handleEditArea(record)" type="primary" size="small">
                                <template #icon>
                                    <EditOutlined />
                                </template>
                            </a-button>
                            <a-popconfirm placement="topRight" @confirm.stop="handleDelete(record.id)">
                                <template #title>
                                    <p>{{ t('yl.deleteConfirmtext') }}</p>
                                </template>
                                <a-button class="action-btn" type="danger" size="small">
                                    <template #icon>
                                        <Delete />
                                    </template>
                                </a-button>
                            </a-popconfirm>
                        </template>
                    </a-table>
                </a-col>
                <a-col :xs="24" :sm="24" :md="14" :lg="15" :xl="15" class="dictionary-detail">
                    <storList :row="selectedRow"></storList>
                </a-col>
            </a-row>
        </div>
        <yl-dept-model
            v-if="visible"
            :visible="visible"
            :loading="confirmLoading"
            :title="title"
            :dept="selectedRow"
            @cancle="handleCancle"
            @submit="handleSubmit"
        ></yl-dept-model>
    </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted, computed, createVNode } from 'vue';
import { useI18n } from 'vue-i18n';
import { PaginationQuery } from '@/types/table';
import { message, Modal } from 'ant-design-vue';
import { addArea, editArea, getareaMerchant } from '@/api/merchant';
import { customExpandIcon } from '@/hooks/customExpandIcon';
import ylMultiButton from '@/components/ylMultiButton.vue';
import storList from './components/store/storList.vue';
import customFilter from './components/tableFilter.vue';
import ylDeptModel from './components/DeptModel.vue';
// 自定义展开图标

import deleteDataId from './deleteData';
import columns from './dataColumns';
import useTables from './dataTables';
import { deleteEmptyKey } from '@/utils/help';
import { TableState, CheckAble } from '@/types/table';

export default defineComponent({
    name: 'department',
    components: {
        ylMultiButton,
        storList,
        customFilter,
        ylDeptModel,
    },
    setup() {
        const { t } = useI18n();
        const Query: PaginationQuery = reactive({
            page: 0,
            size: 9,
            sort: 'id,desc',
            areaCode: '',
        });

        // 搜索条件
        let { tableQuery, getAreaData, selectedRow, selectedRowKeys, visible } = useTables;
        const state = reactive({
            title: t('yl.addDept'),
            confirmLoading: false, // 弹窗按钮的loading
        });

        onMounted(() => {
            getAreaData(tableQuery);
        });

        // 搜索
        const handleInitTable = (query: PaginationQuery | TableCustomFilter) => {
            tableQuery.page = 0;
            const { blurry } = query;
            blurry && delete query.blurry;
            tableQuery = Object.assign({}, tableQuery, { ...query, name: blurry });
            getAreaData(tableQuery);
        };
        // 重置
        const handleResetTable = () => {
            tableQuery.page = 0;
            selectedRowKeys.value = [];
            getAreaData(tableQuery);
        };
        // 新增、编辑
        const handleSubmit = (dept: NormalObj) => {
            state.confirmLoading = true;
            deleteEmptyKey(dept);
            const msg = dept.id ? t('yl.editSuccess') : t('yl.addSuccess');
            const realRequest = dept.id ? editArea(dept) : addArea(dept);
            return realRequest
                .then(() => {
                    state.confirmLoading = false;
                    message.success(msg);
                    visible.value = false;
                    const timer = setTimeout(() => {
                        handleInitTable(tableQuery);
                        clearTimeout(timer);
                    }, 500);
                })
                .catch(() => {
                    state.confirmLoading = false;
                });
        };
        // 设置行属性... 点击 鼠标滑过等
        const handleCustomRow = (record: NormalObj, index: number) => {
            return {
                onClick: async () => {
                    // state.index = index;
                    // const { areaCode } = record;
                    // Query.areaCode = areaCode;
                    // // // selectedRowKeys.value = [id];
                    // // state.checkedRole = Object.assign({}, record);
                    // const { content } = await getareaMerchant(Query);
                    console.log('触发了');
                    selectedRow.value = record;
                },
            };
        };
        return {
            ...toRefs(state),
            t,
            columns,
            ...useTables,
            handleInitTable,
            ...deleteDataId(),
            handleResetTable,
            handleSubmit,
            customExpandIcon,
            handleCustomRow,
            Query,
        };
    },
});
</script>
<style lang="scss" scoped>
.container {
    width: 100%;
    &-filter {
        @include flex;
        &-item {
            margin-right: 20px;
        }
    }
    &-data {
        padding: $width20 $width0;
        .multi-action {
            background: $white;
        }
        .action-btn + .action-btn {
            margin-left: $width8;
        }
    }
    .areaData {
        display: flex;
    }
}
</style>
